<template>
  <!-- 主页面 -->
  <div class="center">
    <div class="main">
      <div class="main_l">
        <div class="main-nb">
          <a class="mn-h mn-no" href="#"><span>大模型子站</span></a>
          <a class="mn-no" href="#"><span>关注</span></a>
          <ul v-for="(item, index) in homepagelist" :key="index">
            <li>
              <RouterLink :to="`${item.to}`">{{ item.label }}</RouterLink>
            </li>
          </ul>
          <a href="#"><span>排行榜</span></a>
        </div>
      </div>
      <div class="main-r">
        <div class="main-rl">
          <div><a href="#">推荐</a><a href="#">最新</a></div>
          <router-view></router-view>

        </div>
        <div class="main-rr">
          <div class="mrr-greet">
            <div class="greet-in-l"><span>早上好！</span>
              <div>点亮在社区的每一天</div>
            </div>
            <div class="greet-in-r"><button>去签到</button></div>
          </div>
          <div class="mrr-article">
            <div class="article-in-one ">
              <div class="ai-one-l"><img src="" alt=""><span>文章榜</span></div>
              <div class="ai-one-r"><img src="" alt=""><span>换一换</span></div>
            </div>
            <ul class="article-in-two">
              <li>
                <div>1</div><a href="#">这是一段占位文字，用于在页面中占位，方便预览</a>
              </li>
              <li>
                <div>2</div><a href="#">这是一段占位文字，用于在页面中占位，方便预览</a>
              </li>
              <li>
                <div>3</div><a href="#">这是一段占位文字，用于在页面中占位，方便预览</a>
              </li>
              <li>
                <div>4</div><a href="#">这是一段占位文字，用于在页面中占位，方便预览</a>
              </li>
              <li>
                <div>5</div><a href="#">这是一段占位文字，用于在页面中占位，方便预览</a>
              </li>
            </ul>
            <div class="article-in-three"><span>查看更多</span><img src="" alt=""></div>
          </div>
          <img class="mrr-advertising" src="../assets/shanghai.png" alt="">
          <img class="mrr-advertising" src="../assets/shanghai.png" alt="">
          <img class="mrr-advertising" src="../assets/shanghai.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
//修改文档标题title
// export const toptiale = ref('稀土掘金')
// function html_tiale(label:string){
//   toptiale.value = label
// }
</script>

<script setup lang="ts">
import { HomePageList } from '@/router';
// import { ref } from 'vue';

//路由
const homepagelist = HomePageList.map(HomePageList => ({
  label: HomePageList.meta.title,
  to: HomePageList.path
}))

// window.onload = function () {
//   const main_l = document.querySelector('.main_l');
//   const scrollThreshold = 400;
//   // 检查main_l是否为null
//   if (main_l) {
//     window.addEventListener('scroll', () => {
//       if (window.scrollY > scrollThreshold) {
//         main_l.classList.add('scrolled_main_l');
//       } else if (window.scrollY === 0) {
//         main_l.classList.remove('scrolled_main_l');
//       }
//     });
//   } else {
//     console.error('没有找到具有 .main_l 类的元素');
//   }
// }


</script>

<style scoped lang="scss">
@import url(../assets/home_page.scss);

.main.scrolled_main_l {
  top: 20px;
}
</style>
